import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, message } from 'tea-component';
import Clipboard from 'clipboard';
import { BaseItem } from '@src/components/common-compinents';
import { getQueryVariable, timeFormatYMDHms } from '@src/utils/index';
import * as actionTypes from '@src/model/actionType';

export function Basic() {
  const id = decodeURIComponent(getQueryVariable('id') || '') || 0;
  const dispatch = useDispatch();
  // @ts-ignore
  const blockListStore = useSelector((state) => state.blockDetailReducer);

  const baseData = [
    { name: '提案节点', value: blockListStore.blockDetail.ProposalNodeId },
    { name: '区块创建时间', value: timeFormatYMDHms(blockListStore.blockDetail.Timestamp) },
    { name: '交易merkle根哈希', value: blockListStore.blockDetail.TxMerkleHash },
    { name: '区块交易数目', value: blockListStore.blockDetail.TxCount },
    { name: '区块高度', value: blockListStore.blockDetail.BlockHeight },
    { name: 'DAG特征摘要', value: blockListStore.blockDetail.Dag },
    { name: '提案组织', value: blockListStore.blockDetail.OrgId },
  ];

  useEffect(() => {
    dispatch({
      type: actionTypes.fetchBlockDetail,
      params: {
        Id: id,
      },
    });

    const currentClipboard = new Clipboard('.currentCopyBtn');
    currentClipboard.on('success', function () {
      message.success({
        content: '已复制到剪贴板',
      });
      // clipboard.destroy();
    });

    const preClipboard = new Clipboard('.preCopyBtn');
    preClipboard.on('success', function () {
      message.success({
        content: '已复制到剪贴板',
      });
      // clipboard.destroy();
    });
  }, [dispatch]);

  return (
    <div
      style={{
        backgroundColor: '#fff',
        padding: '12px 20px',
        border: '1px solid #DDDDDD',
      }}
    >
      <div
        style={{
          fontSize: '12px',
          fontFamily: 'Microsoft YaHei',
          color: '#888888',
          padding: '12px 0px',
        }}
      >
        <div style={{ display: 'inline-block', width: '105px' }}>本区块哈希</div>
        <span id="current-hash" style={{ color: '#444444' }}>
          {blockListStore.blockDetail.BlockHash}
        </span>
        <Button
          className="currentCopyBtn"
          type="link"
          style={{ marginLeft: '34px' }}
          data-clipboard-target="#current-hash"
        >
          复制
        </Button>
      </div>
      <div
        style={{
          fontSize: '12px',
          fontFamily: 'Microsoft YaHei',
          color: '#888888',
          padding: '12px 0px',
        }}
      >
        <div style={{ display: 'inline-block', width: '105px' }}>前一个区块哈希</div>
        <span id="pre-hash" style={{ color: '#444444' }}>
          {blockListStore.blockDetail.PreBlockHash}
        </span>
        <Button className="preCopyBtn" type="link" style={{ marginLeft: '34px' }} data-clipboard-target="#pre-hash">
          复制
        </Button>
      </div>
      {baseData.map((item, index) => {
        return <BaseItem key={index} {...item}></BaseItem>;
      })}
    </div>
  );
}
